<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票创建与编辑页设计</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }
        .container {
            max-width: 414px;
            margin: 20px auto;
            background: white;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }
        .back-button {
            font-size: 18px;
            margin-right: 10px;
        }
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
        }
        .header-action {
            font-size: 14px;
            color: #333;
        }
        .content {
            padding: 15px;
            padding-bottom: 70px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        .form-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            min-height: 100px;
            resize: vertical;
        }
        .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            background-color: white;
        }
        .form-hint {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .form-error {
            font-size: 12px;
            color: #f44336;
            margin-top: 5px;
        }
        .upload-box {
            border: 1px dashed #ddd;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            background: #f9f9f9;
            cursor: pointer;
        }
        .upload-icon {
            font-size: 24px;
            color: #999;
            margin-bottom: 10px;
        }
        .upload-text {
            font-size: 14px;
            color: #666;
        }
        .upload-hint {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .preview-image {
            width: 100%;
            height: 150px;
            background: #f0f0f0;
            border-radius: 4px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            background: rgba(0,0,0,0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .date-inputs {
            display: flex;
            gap: 10px;
        }
        .date-input {
            flex: 1;
        }
        .section-title {
            font-size: 16px;
            font-weight: 500;
            margin: 25px 0 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
        }
        .checkbox-group {
            margin-bottom: 15px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .checkbox-input {
            margin-right: 10px;
        }
        .checkbox-label {
            font-size: 14px;
        }
        .radio-group {
            margin-bottom: 15px;
        }
        .radio-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .radio-input {
            margin-right: 10px;
        }
        .radio-label {
            font-size: 14px;
        }
        .bottom-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 414px;
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            box-sizing: border-box;
            border-top: 1px solid #f0f0f0;
        }
        .cancel-button {
            padding: 10px 20px;
            font-size: 14px;
            color: #666;
            background: #f0f0f0;
            border-radius: 4px;
            border: none;
        }
        .save-button {
            padding: 10px 20px;
            font-size: 14px;
            color: white;
            background: #333;
            border-radius: 4px;
            border: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="back-button">←</div>
            <div class="header-title">创建投票活动</div>
            <div class="header-action">预览</div>
        </div>
        
        <div class="content">
            <div class="form-group">
                <label class="form-label">活动标题</label>
                <input type="text" class="form-input" placeholder="请输入活动标题">
                <div class="form-hint">简洁明了的标题更容易吸引参与者</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">活动封面</label>
                <div class="upload-box">
                    <div class="upload-icon">📷</div>
                    <div class="upload-text">点击上传封面图片</div>
                    <div class="upload-hint">建议尺寸：750×400px，JPG/PNG格式</div>
                </div>
                <div class="preview-image">
                    <div style="color: #999; font-size: 14px;">预览图片</div>
                    <div class="preview-remove">×</div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">活动描述</label>
                <textarea class="form-textarea" placeholder="请输入活动描述"></textarea>
                <div class="form-hint">详细描述活动内容、目的和意义</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">活动时间</label>
                <div class="date-inputs">
                    <div class="date-input">
                        <input type="text" class="form-input" placeholder="开始日期">
                    </div>
                    <div class="date-input">
                        <input type="text" class="form-input" placeholder="结束日期">
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">主办方</label>
                <input type="text" class="form-input" placeholder="请输入主办方名称">
            </div>
            
            <div class="form-group">
                <label class="form-label">联系方式</label>
                <input type="text" class="form-input" placeholder="请输入联系方式">
            </div>
            
            <div class="section-title">投票设置</div>
            
            <div class="form-group">
                <label class="form-label">投票类型</label>
                <select class="form-select">
                    <option>单选投票</option>
                    <option>多选投票</option>
                    <option>评分投票</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">每人每天可投票数</label>
                <input type="number" class="form-input" placeholder="请输入数量" value="5">
                <div class="form-hint">设置为0表示不限制</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">是否允许重复投票</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="repeat-no" name="repeat" class="radio-input" checked>
                        <label for="repeat-no" class="radio-label">不允许（同一用户不能重复投票给同一作品）</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="repeat-yes" name="repeat" class="radio-input">
                        <label for="repeat-yes" class="radio-label">允许（同一用户可以重复投票给同一作品）</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">投票验证方式</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="verify-wechat" class="checkbox-input" checked>
                        <label for="verify-wechat" class="checkbox-label">微信授权</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="verify-phone" class="checkbox-input">
                        <label for="verify-phone" class="checkbox-label">手机号验证</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="verify-code" class="checkbox-input">
                        <label for="verify-code" class="checkbox-label">验证码</label>
                    </div>
                </div>
            </div>
            
            <div class="section-title">高级设置</div>
            
            <div class="form-group">
                <label class="form-label">是否显示排行榜</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="rank-yes" name="rank" class="radio-input" checked>
                        <label for="rank-yes" class="radio-label">显示</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="rank-no" name="rank" class="radio-input">
                        <label for="rank-no" class="radio-label">不显示</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">是否允许评论</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="comment-yes" name="comment" class="radio-input" checked>
                        <label for="comment-yes" class="radio-label">允许</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="comment-no" name="comment" class="radio-input">
                        <label for="comment-no" class="radio-label">不允许</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">活动结束后</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="after-show" name="after" class="radio-input" checked>
                        <label for="after-show" class="radio-label">显示结果</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="after-hide" name="after" class="radio-input">
                        <label for="after-hide" class="radio-label">隐藏结果</label>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom-bar">
            <button class="cancel-button">取消</button>
            <button class="save-button">保存</button>
        </div>
    </div>
</body>
</html>